<template>
    <fieldset>
        <legend>model封装</legend>
         <!-- modal封装 -->
        <modals :visible="visible" @on-cancel="cancel"  @on-confirm="confirm"></modals> 
        <button @click="showModal" >点击显示模态框</button>
    </fieldset>
</template>
<script>
import modals from "../../modals"
export default{
    components:{
        modals,
    },
    data(){
        return{
            visible:false
        }
    },
    methods:{
        showModal(){
            this.visible = true;
        },
        //模态框点击取消按钮触发的事件处理函数
        cancel(){
            this.visible = false;
            alert('已取消');
        },
        //模态框点击确定按钮触发的时间处理函数
        confirm(){
            this.visible= false;
            alert('提交成功');
        }
    }
}
</script>
